<template>
  <div>
    <el-dialog style="width: 60%; min-height: 30vh" v-model="dialogVisible">
      <div>
        <el-table size="large" stripe border :data="deptList">
          <el-table-column property="id" label="ID" />
          <el-table-column property="name" label="科室名称" />
          <el-table-column label="排队人数">
            <template #default="scope"
              ><span>{{ scope.row.userList.length }}</span></template
            >
          </el-table-column>
          <el-table-column label="排队时间">
            <template #default="scope"
              ><span>{{
                (scope.row.userList.length * duration) / 60
              }}</span></template
            >
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="left" width="200">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确认在该科室下排队吗？"
                @confirm="queue(scope.row.id)"
              >
                <template #reference>
                  <el-button size="small">排队 </el-button>
                </template>
              </el-popconfirm>
              <!--          <el-button-->
              <!--            v-else-->
              <!--            type="primary"-->
              <!--            size="small"-->
              <!--            @click="cancelQueue(scope.row.deptId)"-->
              <!--            >取消排队-->
              <!--          </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ICheckDept } from "@/api/queue/types";
import { PropType } from "vue";
import { queueProject } from "@/api/queue";
import { InfoFilled } from "@element-plus/icons-vue";

const dialogVisible = ref(false);
const projectId = ref<number>();
const duration = ref<number>();
// const checkFlag = ref(false);

const emit = defineEmits(["updateSource"]);

const props = defineProps({
  deptList: {
    type: Array as PropType<ICheckDept[]>,
    required: true,
  },
});

// const init = (flag: boolean, project: number) => {
const init = (project: number, time: number) => {
  projectId.value = project;
  duration.value = time;
  dialogVisible.value = true;
};

const queue = (deptId: number) => {
  queueProject(deptId).then((res) => {
    if (res.data) {
      dialogVisible.value = false;
      emit("updateSource");
    } else {
      ElNotification({
        title: "提示",
        message: h("i", { style: "color: teal" }, "出现错误!"),
      });
    }
  });
};
// const cancelQueue = (deptId: number) => {
//   console.log(deptId, projectId.value);
// };

defineExpose({ init });
</script>

<style scoped lang="scss"></style>
